<template>
  <div class="bg">
		<header>生产物料动态展示</header>
		<div class="topBtns">
			<img src="../../assets/images/icon.png" alt="">
			<h4 class="topText">货位布局</h4>
			<TabBtns :activeTab="defaultTopTab" :tabs="topTabsData" @updateTab="changeTopTab" />
		</div>
		<IconsWrap style="marginLeft:10px;padding: 20px;" :dataList="topIconTextDatas" />
		<div class="canvasWrap">
			<canvas id="carRoute" width="800px" height="660px"></canvas>
			<!-- 立柜 货位 信息 -->
			<GoodsPosi :datas="datas" class="goodsContainer" />
			<!-- 立柜 四向车 位置 信息 -->
			<CarAnimate class="carContainer" ref="carAnimateRef" :carDetail="carDetail" :locationScaleX="locationScaleX" :locationScaleY="locationScaleY" />
			<!-- 传送带 各段 货物信息 -->
			<TransformGoods class="transformGoods" :moveGoods="moveGoods" :locationScaleX="locationScaleX" :locationScaleY="locationScaleY" />
			<!-- agv 下方货位 信息 -->
			<AgvTopGoods class="agvTopGoodsContainer" :agvLDatas="agvLDatas" :agvRDatas="agvRDatas" />
			<AgvGoodsPosi class="agvGoodsContainer" />
			<!-- agv canvas -->
			<canvas id="agvRoute" width="1120px" height="660px"></canvas>
		</div>
		<div class="botWrap">
			<div class="botLeft">
				<div class="topCondition">
					<TabBtnsBot :activeTab="defaultBotTab" :tabs="botTabsData" @updateTab="changeBotTab" />
					<div class="dateSelect">
						<span v-for="nav in dateNavData"
							:key="nav.label"
							:class="defaultDateVal == nav.value ? 'activeSelect' : ''"
							@click="defaultDateVal = nav.value">
							{{ nav.label }}
						</span>
					</div>
				</div>
				<dv-scroll-board :config="config" style="width:100%;height:160px;marginLeft:30px;marginTop:15px;" />
			</div>
			<div class="botRight">
				<div class="botRightHeader">
					<img src="../../assets/images/icon.png" alt="">
					<h4 class="topText">配灰单</h4>
				</div>
				<dv-scroll-board :config="configForm" style="width:100%;height:160px;marginRight:10px;marginLeft:10px;marginTop:15px;" />
			</div>
		</div>
  </div>
</template>
 
<script> 
import TabBtnsBot from '@/components/TabBtnsBot.vue'
import GoodsPosi from './components/goodsPosi.vue'
import CarAnimate from './components/carPositonsAnimate.vue'
import TransformGoods from './components/transformGoods.vue'

import { GetCargoSpaceStock, 
		GetCargoSpaceStockArea, 
		getFourWayMessage,
		getConveyorLineMessage,
		getCargoSpaceDetails,//货位情况统计
		getStock,//库存统计
		getInSum,
		getOutSum,
		getOutMaterial,//配灰单
	} from '@/apis/screen'

//四向车 y轴数据
const yData = ['1排', '1排', '巷道', '2排', '1排', '1排', '巷道', '2排', '2排']
export default {
	components: {
		TabBtns: ()=> import('@/components/TabBtns.vue'), //头部 货位布局
		IconsWrap: ()=> import('./components/iconsWrap.vue'),
		TabBtnsBot,//: ()=> import('@/components/TabBtnsBot.vue')
		CarAnimate,//: ()=> import('./components/carPositonsAnimate.vue'),
		GoodsPosi, //: ()=> import('./components/goodsPosi.vue'),
		AgvTopGoods: ()=> import('./components/agvTopGoods.vue'),
		AgvGoodsPosi: ()=> import('./components/agvBottomGoods.vue'),
		TransformGoods,
		
	},
	data() {
		return {
			topTabsData: [{ //头部 货位布局tabs数据
				name: '第1层',
				value: 1,
			},{
				name: '第2层',
				value: 2,
			},{
				name: '第3层',
				value: 3,
			}],
			defaultTopTab: 1, //头部 货位布局 默认值
			botTabsData: [{ //底部 tabs数据
				name: '库存统计',
				value: 1,
			},{
				name: '入库统计',
				value: 2,
			},{
				name: '出库汇总',
				value: 3,
			}],
			defaultBotTab: 1, //底部 list 默认值
			topIconTextDatas: [{
				value: 162,
				label: '货位总数',
			},{
				value: 54,
				label: '本层货位数量',
			},{
				value: 33,
				label: '本层使用数量',
			},{
				value: 53,
				label: '占用数量',
			},{
				value: 33,
				label: '停用数量',
			},{
				value: 66321,
				label: '总重量 (kg)',
			},{
				value: 16332,
				label: '本层总重量 (kg)',
			}],
			defaultDateVal: 1,
			config: {
				headerBGC: 'transparent', // 表头背景色
				oddRowBGC: 'transparent', //奇数行背景色
				evenRowBGC: 'transparent', //偶数行背景色
				align: ['left'], //对齐方式
				columnWidth: ['600', 90, 90],
				rowNum: 3, //表行数
				header: [ '物料名称', '数量', '单位'
					// { // 表头数据 
					// 	prop:'materialName',
					// 	label:'物料名称',
					// 	align:'left',
					// },{
					// 	prop:'quantity',
					// 	label:'数量',
					// 	align:'left',
					// },{
					// 	prop:'materialUnit',
					// 	label:'单位',
					// 	align:'left',
					// }
				],
				data: [], // 表数据
			},
			configForm: {
				headerBGC: 'transparent', // 表头背景色
				oddRowBGC: 'transparent', //奇数行背景色
				evenRowBGC: 'transparent', //偶数行背景色
				align: ['left'], //对齐方式
				columnWidth: ['300', 90, 90,90, 90,90, 120, 110],
				rowNum: 3, //表行数
				header: ['物料名称',
'生产井号',
'井型',
'灰种',
'数量',
'单位',
'已出库数量',
'配送状态',
				// 	{ // 表头数据 
				// 	value:'name',
				// 	label:'物料名称',
				// 	align:'left',
				// },{
				// 	value:'shengchanjinghao',
				// 	label:'生产井号',
				// 	align:'left',
				// },{
				// 	value:'jingxing',
				// 	label:'井型',
				// 	align:'left',
				// },{
				// 	value:'huizhong',
				// 	label:'灰种',
				// 	align:'left',
				// },{
				// 	value:'number',
				// 	label:'数量',
				// 	align:'left',
				// },{
				// 	value:'unit',
				// 	label:'单位',
				// 	align:'left',
				// },{
				// 	value:'yichukushuliang',
				// 	label:'已出库数量',
				// 	align:'left',
				// },{
				// 	value:'status',
				// 	label:'配送状态',
				// 	align:'left',
				// }
			],
				data: [], // 表数据
			},
			dateNavData: [
				{
					label: '日',
					value: 1
				},
				{
					label: '周',
					value: 2
				},
				{
					label: '月',
					value: 3
				},
				{
					label: '年',
					value: 4
				},
			],
			canvas: null, // 画布
			ctx: null,
			//  primary: "#E4B97F", // 主题色
			locationScaleX: 72, // x一格的物理尺寸
			locationScaleY: 70, // y一格的物理尺寸
			padding: 6, // 左右边距
			datas: [],
			carDetail: {
				left: 0,
				top: 0,
			},
			// carPosition: {
			// 	"fourWayNum": 1,
			// 	"electricityNum": 100,
			// 	"workStatus": 1,
			// 	"x": 6,
			// 	"y": 4,
			// 	"z": 1,
			// 	"workType": 1,
			// 	"havingGoods": 0,
			// 	"charging": 0,
			// 	"action": 0, //1 
			// 	"status": "0",
			// 	"message": "",
			// 	"taskNum": 0
			// },
			// carPosition1: {
			// 	"fourWayNum": 1,
			// 	"electricityNum": 100,
			// 	"workStatus": 0,
			// 	"x": 8,
			// 	"y": 3,
			// 	"z": 1,
			// 	"workType": 1,
			// 	"havingGoods": 1,
			// 	"charging": 0,
			// 	"action": 0,
			// 	"status": "0",
			// 	"message": "",
			// 	"taskNum": 0
			// },
			defaultMoveGoods: { //第一段出 反转0  第二段 出去是正1
				// 'L104'					// 正1 102 不动
				// 'L103' 
				// 'L102': { startX: 9, startY: 3, midX: 9, midY: 3.5, endX: 9, endY: 3.5},
				'L102': { startX: 9, endX: 9, startY: 3.5, end0Y: 4.7, end1Y: 3.5 },
				'L101': { startX: 9, endX: 9, startY: 4.7, end0Y: 5.9, end1Y: 3.5},
				'L3': 	{ startX: 9, endX: 9, startY: 5.8, end0Y: 6.6, end1Y: 4.7},
				'L5': 	{ startX: 9, endX: 9, startY: 8, end0Y: 8, end1Y: 5.8},

				// 'L101': { startX: 9, startY: 3.5, midX: 9, midY: 4.7, endX: 9, endY: 4.8},
				// 'L3': 	{ startX: 9, startY: 4.7, midX: 9, midY: 5.9, endX: 9, endY: 6},
				// 'L4': 	{ startX: 9, startY: 4.7, midX: 9, midY: 6.7, endX: 9, endY: 6},
				// 'L5': 	{ startX: 9, startY: 6, midX: 9, midY: 8, endX: 9, endY: 8},
				// 'L2': 	{ startX: 10, startY: 6.7, midX: 9.9, midY: 6.7, endX: 9, endY: 6.7},
				// 'L1': 	{ startX: 11.2, startY: 6.7, midX: 10.9, midY: 6.7, endX: 10.2, endY: 6.7},
			},
			moveGoods: {
				'L1': null,
				'L2': null,
				'L3': null,
				'L4': null,
				'L5': null,
				'L101': null,
				'L102': null,
			},
			agvCanvas: null,
			agvCtx: null,
			agv1X: 46,
			agv2X: 58,
			timer: null,
			agvLDatas: null,
			agvRDatas: null,
		}
	},
	created() {
		
		this.getLeftBotTableData()
		this.getBotRightTableData()//配灰单 table
		// if(!this.timer) {
			// this.timer = setInterval(()=>{
			// 	this.getFourWayMessage()
				// this.getConveyorLineMessage()
			// }, 3000)

		// }
		this.getAgvTopGoodsPosi()
		// this.getAgvTopRGoodsPosi()
		
			
	},
	mounted() {
		this.$nextTick(()=> {
			this.initData()
			this.initAgvCanvas()
			
		})
	},
	watch: {
		defaultBotTab: { //左下表格 监听
			handler(newV, oldV) {
				this.getLeftBotTableData()
			}
		},
		defaultDateVal: { //左下表格 监听
			handler(newV, oldV) {
				this.getLeftBotTableData()
			}
		},
		carPosition: {
			handler(newV, oldV) {
				
			},
			immediate: true
		},
		defaultTopTab: {
			handler(newV, oldV) {
				if(this.ctx) {
					this.ctx.clearRect(0, 0, 800, 660);
					this.initData()
				}
				this.getLeftGoodsPosi(newV)
				this.getCargoSpaceDetails(newV)
				// this.agvCtx.clearRect(0, 0, 1120, 660);
				// this.initAgvCanvas()
			},
			immediate: true
		}
	},
	destroyed() {

	},
	methods: {
		getCargoSpaceDetails(dataL) {
			getCargoSpaceDetails(dataL).then(res => {
				this.topIconTextDatas[0].value = res.data['spaceCount']
				this.topIconTextDatas[1].value = res.data['layerSpaceCount']
				this.topIconTextDatas[2].value = res.data['layerOccupySpace']
				this.topIconTextDatas[3].value = res.data['occupySpace']
				this.topIconTextDatas[4].value = res.data['inactiveCount']
				this.topIconTextDatas[5].value = res.data['totalWeight']
				this.topIconTextDatas[6].value = res.data['layerWeight']
			})
		},
		getConveyorLineMessage() { // 
			getConveyorLineMessage().then(res => {
				res.data && res.data.forEach(item => {
					switch (item.lineCode) {
						case 'L101':
						this.moveGoods['L101'] = Object.assign({...item}, this.defaultMoveGoods['L101'])
							break;
						case 'L102':
							this.moveGoods['L102'] = Object.assign({...item}, this.defaultMoveGoods['L102'])
							break;
							case 'L3':
							this.moveGoods['L3'] = Object.assign({...item}, this.defaultMoveGoods['L3'])
							break;
							case 'L5':
							this.moveGoods['L5'] = Object.assign({...item}, this.defaultMoveGoods['L5'])
							break;
						default:
							break;
					}
				})
			})
		},
		getFourWayMessage() {
			getFourWayMessage().then(res => {
				this.handleCarPosition(res.data[0])
			})
		},
		getLeftGoodsPosi(L) { //获取四向车 货物位置信息
			GetCargoSpaceStock(L).then(res => {
				let arr = res.data.reduce((accumulator, current) => {
					return accumulator.concat(current.baseCargoSpaceList);
				}, [])
				this.datas = this.handleLeftDatas(arr)
			})
		},
		getAgvTopGoodsPosi() {//获取agv 货物位置信息
			GetCargoSpaceStockArea('JB002').then(res => {
				let arr = res.data.reduce((accumulator, current) => {
					return accumulator.concat(current.baseCargoSpaceList);
				}, [])
				this.agvLDatas = arr //this.handleLeftDatas(arr)
			})
		},
		getAgvTopRGoodsPosi() {//获取agv 货物位置信息
			GetCargoSpaceStockArea('JB005').then(res => {
				let arr = res.data.reduce((accumulator, current) => {
					return accumulator.concat(current.baseCargoSpaceList);
				}, [])
				this.agvRDatas = arr //this.handleLeftDatas(arr)
			})
		},
		handleLeftDatas(datas) {
			return datas.map(item => {
			let nums = item.location.split('_').map(item=> Number(item))
			//*巷道  *排     列    层   *深
			//['01', '01', '03', '02', '02']
			let obj = {
				112: 36,
				111: this.locationScaleX*1 +34,
				//巷道
				121: this.locationScaleX*3 +30,
				212: this.locationScaleX*4 +28,
				211: this.locationScaleX*5 +26,
				//巷道
				221: this.locationScaleX*7 +22,
				222: this.locationScaleX*8 +20,
			}
			let yObj = {
				112: 1,
				111: 2,
				//巷道
				121: 4,
				212: 5,
				211: 6,
				//巷道
				221: 8,
				222: 9,
			}
			let top = obj[nums[0]+''+nums[1]+''+nums[4]]
			let left = (nums[2]-1) * this.locationScaleY + 42//边角料
			let x = nums[2]
			let y = yObj[nums[0]+''+nums[1]+''+nums[4]]
			return {left, top, x, y, ...item}
		})
		},
		initData() {
			const canvas = (this.canvas = document.getElementById("carRoute"));
			const ctx = (this.ctx = canvas.getContext("2d"));
			this.drawChessContainer();
		},
		// 绘制路线
		drawChessContainer() {
			const { ctx } = this;
			// 每次绘制棋盘前,先清空画布
			ctx.rect(0, 0, '100%', '100%');
			// 设置颜色
			ctx.fillStyle = 'rgba(68,215,182, 0.5)';
			ctx.strokeStyle = "rgba(68,215,182, 0.5)";
			// 循环画出来会少一条横线,我们手动加上
			// ctx.beginPath();
			// ctx.moveTo(this.padding, 475);
			// ctx.lineTo(425, 475);
			// 绘制线条
			// ctx.stroke();
			for (var index = 1; index <= 11; index++) {
				// 横线
				if(index < 10) {
					ctx.beginPath();
					if(index <= 3) {
						if(index == 3) {  // 区分 巷道
							ctx.moveTo(this.locationScaleX*0.6, index * this.locationScaleX - this.padding + 0.5);
							ctx.lineTo(this.locationScaleY*(11 + 0.5) , index * this.locationScaleX - this.padding + 0.5);
						}else {
							ctx.moveTo(this.locationScaleX, index * this.locationScaleX - this.padding + 0.5);
							ctx.lineTo(this.locationScaleY*11 , index * this.locationScaleX - this.padding + 0.5);
						}
					}else {
						if( index == 7) { // 0.6 7.5 是巷道多出来的
							ctx.moveTo(this.locationScaleX*0.6, index * this.locationScaleX - this.padding + 0.5);
							ctx.lineTo(this.locationScaleY*7.5 , index * this.locationScaleX - this.padding + 0.5);
						}else {
							ctx.moveTo(this.locationScaleX, index * this.locationScaleX - this.padding + 0.5);
							ctx.lineTo(this.locationScaleY*7 , index * this.locationScaleX - this.padding + 0.5);
						}
					}
					if(index == 3 || index == 7) { // 区分 巷道
						ctx.strokeStyle = "rgba(68,215,182, 1)";
					}else {
						ctx.strokeStyle = "rgba(68,215,182, 0.5)";
					}
					ctx.lineWidth = 6;
					ctx.stroke();// 绘制线条
				}
				// 竖线
				ctx.beginPath();
				ctx.moveTo(this.locationScaleY * index  , this.locationScaleX - 3.5);
				if(index > 7 ) {
					ctx.lineTo(this.locationScaleY * index , this.locationScaleX*3 - 3.5);
				}else {
					ctx.lineTo(this.locationScaleY * index  , this.locationScaleX*9 - 0.5);
				}
				ctx.strokeStyle = "rgba(68,215,182, 0.5)";
				
				ctx.lineWidth = 6;
				ctx.stroke();	// 绘制线条
				if(index == 7) { // 区分 巷道
					ctx.beginPath();
					ctx.moveTo(this.locationScaleY * index  , this.locationScaleX*3 - 5.5);
					ctx.lineTo(this.locationScaleY * index , this.locationScaleX*7- 6.5 );
					ctx.strokeStyle = "rgba(68,215,182, 1)";
					ctx.stroke();// 绘制线条

				}
			}
			this.drawVerticalAxisLabels(ctx)
			this.drawHorizontalAxisLabels(ctx)
			this.drawYChuanSongDai(ctx)
			if(this.defaultTopTab == 1) {
				this.drawXChuanSongDai(ctx)
			}
		},
		drawVerticalAxisLabels(context) { //绘制垂直轴标注
			context.textAlign = "center";
			context.font = "small-caps normal 16px/1 sans-serif";
			context.textBaseline = "top";
			for (var i = 1; i <=  11; i++) {
					context.fillText(i+'列', i * this.locationScaleY, 15);
			}
		},
		drawHorizontalAxisLabels(context) { //绘制水平轴标注
			context.textAlign = "center";
			context.font = "small-caps normal 16px/1 sans-serif";
			context.textBaseline = "middle";
			for (var i = 1; i <= 9; i++) {
					context.fillText(yData[i-1], 20, i * this.locationScaleX-4);
			}
		},
		createYchuansongdai() { //创建y轴 传送带图片
			var tempCanvas = document.createElement('canvas'); 
			var tempCtx = tempCanvas.getContext('2d');
			tempCanvas.width = 47;
			tempCanvas.height = 4;
			tempCtx.fillStyle = "#fff";
			tempCtx.fillRect(1, 0, 46, 4);
			tempCtx.fillStyle = "rgb(0 ,19, 100)";
			tempCtx.fillRect(-2, 1, 44, 2);
			return tempCanvas.toDataURL("image/png"); // 将canvas转换为图片
		},
		drawYChuanSongDai(ctx) { //画y轴传送带
			//画提升机
			ctx.lineWidth = 1.5;
			ctx.strokeStyle = '#fff';
			ctx.strokeRect(this.locationScaleY * 9 - 40, this.locationScaleX*5 - 40, 80, 80); // 参数分别为x, y, 宽度, 高度
			//创建一个临时canvas去画传送带
			var dataURL = this.createYchuansongdai()
			var image = new Image();
			image.src = dataURL //require('');
			image.onload = ()=> {
				var pat = ctx.createPattern(image, "repeat");
				if(this.defaultTopTab == 1) {
					// ctx.rect(this.locationScaleY * 11.5, this.locationScaleY *5 , 45, this.locationScaleX *3); //四向车里的2
					ctx.rect(this.locationScaleX * 8.5 - 3, this.locationScaleY *3 + 3, 45, this.locationScaleX * 6); //四向车里的1
				}else {
					ctx.rect(this.locationScaleX * 8.5 - 3, this.locationScaleY *3 + 3, 45, (this.locationScaleX * 2.5 + this.padding)); //四向车里的1
				}
				ctx.fillStyle = pat;
				ctx.fill();
			}
		},
		createXchuansongdai() { //创建x轴 传送带图片
			var tempCanvas = document.createElement('canvas'); 
			var tempCtx = tempCanvas.getContext('2d');
			tempCanvas.height = 48;
			tempCanvas.width = 4;
			tempCtx.fillStyle = "#fff";
			tempCtx.fillRect(0, 0, 6, 40);
			tempCtx.fillStyle = "rgb(0 ,19, 100)";
			tempCtx.fillRect(0, 2, 2, 36);
			return tempCanvas.toDataURL("image/png"); // 将canvas转换为图片
		},
		drawXChuanSongDai(ctx) { // 画x轴传送带
			//创建一个临时canvas去画传送带
			var dataURL = this.createXchuansongdai()
			var image = new Image();
			image.src = dataURL //require('');
			image.onload = ()=> {
				ctx.strokeStyle = ctx.createPattern(image, 'repeat'); // 创建图片纹理
				ctx.lineWidth = 40;
				ctx.beginPath();
				ctx.moveTo(this.locationScaleY *8.5 + 14, this.locationScaleY * 7 + 11);
				ctx.lineTo(this.locationScaleY *11  + 40, this.locationScaleY * 7 + 11);
				ctx.stroke(); // 使用图片纹理绘制线条
			}
		},
		handleCarPosition(data) { // 处理后端反的数据 left top
			let left = this.locationScaleY * (data.x) - 30// 60是车宽度
			let top =  this.locationScaleX * (((data.x == 9 && (data.y==10||data.y==11))?(data.y-6):data.y) - 1) + 32
			let numX = Math.abs(data.x - this.carDetail.x)
			let numY = Math.abs(data.y - this.carDetail.y) - (data.x == 9 &&(data.y==10||data.y==11)?6:0)
			console.log(numX, numY)
			let str = numX+'s, '+ numY+'s'
			if(this.$refs['carAnimateRef']) {
				this.$refs['carAnimateRef'].mySetProperty(str)
			}
			this.carDetail = Object.assign({left,	top}, {...data})
		},
		initAgvCanvas() {
			const canvas = (this.agvCanvas = document.getElementById("agvRoute"));
			const ctx = (this.agvCtx = canvas.getContext("2d"));
			this.createAgvRoutes()
			this.createAgvTransformY(ctx)
			this.createAgvTransformX(ctx)
			ctx.fillStyle = '#FFD257';
			ctx.strokeStyle = "#FFD257";
			ctx.beginPath();
			ctx.moveTo(this.locationScaleY * 9.5 + 10, 50 );
			ctx.lineTo(this.locationScaleY * 9.5 + 10, this.locationScaleY * 3 + 35);
			ctx.moveTo(this.locationScaleY * 12 , 50 );
			ctx.lineTo(this.locationScaleY * 12 , this.locationScaleY * 3 + 35);
			ctx.moveTo(this.locationScaleY * 10 + 40, 232 );
			ctx.lineTo(this.locationScaleY * 10 + 76 , 232);
			ctx.lineWidth = 3;
			ctx.stroke();
		},
		createAgvRoutes() {
			const { agvCtx } = this;
			agvCtx.rect(0, 0, '100%', '100%');
			// 设置颜色
			agvCtx.fillStyle = 'rgba(68,215,182, 1)';
			agvCtx.strokeStyle = "rgba(68,215,182, 1)";
			agvCtx.beginPath();
			agvCtx.moveTo(0, 7 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(this.locationScaleY , 7 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(this.locationScaleY , 1.5 * this.locationScaleX - this.padding + 0.5);
			
			agvCtx.moveTo(0, 3 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(this.locationScaleY , 3 * this.locationScaleX - this.padding + 0.5);

			agvCtx.moveTo(10, 7 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(10 , 5 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(10 + this.locationScaleY * 10 , 5 * this.locationScaleX - this.padding + 0.5);

			agvCtx.moveTo(this.locationScaleY, 6.5 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(10 + this.locationScaleY * 10  , 6.5 * this.locationScaleX - this.padding + 0.5);

			agvCtx.moveTo(10 + this.locationScaleY * 10, 6.5 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo(10 + this.locationScaleY * 10  , 3.5 * this.locationScaleX - this.padding + 0.5);

			agvCtx.moveTo( this.locationScaleY * 9.5, 6.5 * this.locationScaleX - this.padding + 0.5);
			agvCtx.lineTo( this.locationScaleY * 9.5  , 7.5 * this.locationScaleX - this.padding + 0.5);

			for(let columnLine = 0; columnLine <= 8; columnLine++){
				if(columnLine <= 4) {
					agvCtx.moveTo(86 + this.locationScaleY + this.agv1X*columnLine, 6.5 * this.locationScaleX - this.padding + 0.5);
					agvCtx.lineTo(86 + this.locationScaleY + this.agv1X*columnLine,  this.locationScaleX - this.padding + 0.5);
				}
				else if(columnLine <= 8){
					let xLoacation = 86  + this.locationScaleY + this.agv1X*4 + this.agv2X*(columnLine - 4)
					agvCtx.moveTo(xLoacation, 6.5 * this.locationScaleX - this.padding + 0.5);
					agvCtx.lineTo(xLoacation, this.locationScaleX - this.padding + 0.5);
				}
			}
			agvCtx.lineWidth = 6;
			agvCtx.stroke();// 绘制线条
		},
		//agv 传送带
		createYagv() { //创建y轴 传送带图片
			var tempCanvas = document.createElement('canvas'); 
			var tempCtx = tempCanvas.getContext('2d');
			tempCanvas.width = 46;
			tempCanvas.height = 4;
			tempCtx.fillStyle = "#fff";
			tempCtx.fillRect(0, 0, 46, 4);
			tempCtx.fillStyle = "rgb(0 ,19, 100)";
			tempCtx.fillRect(-1, 1, 44, 2);
			return tempCanvas.toDataURL("image/png"); // 将canvas转换为图片
		},
		createXagv() { //创建x轴 传送带图片
			var tempCanvas = document.createElement('canvas'); 
			var tempCtx = tempCanvas.getContext('2d');
			tempCanvas.height = 49;
			tempCanvas.width = 4;
			tempCtx.fillStyle = "#fff";
			tempCtx.fillRect(0, 0, 6, 44);
			tempCtx.fillStyle = "rgb(0 ,19, 100)";
			tempCtx.fillRect(0, 2, 2, 40);
			return tempCanvas.toDataURL("image/png"); // 将canvas转换为图片
		},
		createAgvTransformY(ctx) {
			var dataURL = this.createYagv()
			var image = new Image();
			image.src = dataURL //require('');
			image.onload = ()=> {
				ctx.strokeStyle = ctx.createPattern(image, 'repeat'); // 创建图片纹理
				ctx.lineWidth = 46;
				ctx.beginPath();
				ctx.moveTo(this.locationScaleY * 9.5 + 46, this.locationScaleY * 1 + 25);
				ctx.lineTo(this.locationScaleY * 9.5 + 46, this.locationScaleY * 3 + 35);

				ctx.moveTo(this.locationScaleY * 10.5 + 68.5, this.locationScaleY * 1 + 25);
				ctx.lineTo(this.locationScaleY * 10.5 + 68.5, this.locationScaleY * 3 + 35);
				ctx.stroke(); 
			}
		},
		createAgvTransformX(ctx) {
			var dataURL = this.createXagv()
			var image = new Image();
			image.src = dataURL //require('');
			image.onload = ()=> {
				ctx.strokeStyle = ctx.createPattern(image, 'repeat'); // 创建图片纹理
				ctx.lineWidth = 46;
				ctx.beginPath();
				ctx.moveTo(this.locationScaleY * 9.5 + 22, this.locationScaleY * 1 + 3);
				ctx.lineTo(this.locationScaleY * 9.5 + 22 + 140, this.locationScaleY * 1 + 3);
				ctx.stroke(); 
			}
		},
		changeTopTab(data) {
			this.defaultTopTab = data
		},
		changeBotTab(data) {
			this.defaultBotTab = data
		},
		getLeftBotTableData() { //获取左下方表格信息
			switch (this.defaultBotTab) { //
				case 1:
					getStock(this.defaultDateVal).then(res => {
						this.config.data = res.data.map(item => {
							return [item.materialName, item.quantity, item.materialUnit]
							arr.push({name: item.materialName, number:item.quantity, unit:item.materialUnit})
						})
						this.config = {...this.config}
					})
					break;
				case 2:
					getInSum(this.defaultDateVal).then(res => {
						this.config.data = res.data.map(item => {
							return [item.materialName, item.quantity, item.materialUnit]
							arr.push({name: item.materialName, number:item.quantity, unit:item.materialUnit})
						})
						this.config = {...this.config}
					})
					break;
				case 3:
					getOutSum(this.defaultDateVal).then(res => {
						this.config.data = res.data.map(item => {
							return [item.materialName, item.quantity, item.materialUnit]
						})
						this.config = {...this.config}
					})
					break;
					
				default:
					break;
			}
		},
		getBotRightTableData() { //获取右下角table 数据
			getOutMaterial().then(res => {
				console.log(res.data)
				// this.configForm.data = res.data
				this.configForm.data = res.data.map(item => {
							return [item.materialName, item.applyQuantity, item.materialUnit,item.materialName, item.applyQuantity, item.materialUnit,item.materialName, item.applyQuantity]
						})
						this.configForm = {...this.configForm}
			})
			// [{ // 需处理 按顺序得 只 3个数据
			// 	name: '油井水泥用膨胀剂G415W钙盐类',
			// 	number: 0.07,
			// 	unit: '公斤',
			// 	shengchanjinghao: '?',
			// 	jingxing: '?',
			// 	huizhong: '?',
			// 	yichukushuliang: 10,
			// 	status: '<span class="datavTableStatus" >'+'已完成'+'</span>',
			// }, {
			// 	name: '油井水泥用缓凝剂G421R3有机膦酸盐类',
			// 	number: 0.01,
			// 	unit: '公斤',
			// 	shengchanjinghao: '?',
			// 		jingxing: '?',
			// 		huizhong: '?',
			// 		yichukushuliang: 20,
			// 		status: '<span class="defaultTableStatus" >'+'未开始'+'</span>',
			// }, {
			// 	name: '油井水泥用缓凝剂G421R3有机膦酸盐类',
			// 	number: 0.01,
			// 	unit: '公斤',
			// 	shengchanjinghao: '?',
			// 		jingxing: '?',
			// 		huizhong: '?',
			// 		yichukushuliang: 30, //
			// 		status: '<span class="datavTableStatus" >'+'已完成'+'</span>',
			// }, {
			// 	name: '油井水泥用缓凝剂G421R3有机膦酸盐类',
			// 	number: 0.01,
			// 	unit: '公斤',
			// 	shengchanjinghao: '?',
			// 		jingxing: '?',
			// 		huizhong: '?',
			// 		yichukushuliang: 30, //
			// 		status: '<span class="datavTableStatus" >'+'已完成'+'</span>',
			// }]
		},
	}
};
</script>

<style lang="scss" scope>
.bg {
  background-image: url("@/assets/images/bg.png");
  // width: 100vw;
  // height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	
	header{
		background-image: url("@/assets/images/top.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 1920px;
		height: 112px ;
		line-height: 82px;
		text-align: center;
		color: #C3E6FF;
		font-size: 32px;
		// padding-bottom: 30px;
		letter-spacing: 2px;
		font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
		font-weight: bold;
		// text-align: left;
		white-space: nowrap;
  }
	.topBtns{
		position: absolute;
		left: 1vw;
		top: 52px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 20px;
		img{
			width: 22px;
			height: 22px;
		}
		.topText{
			font-size: 20px;
			color: #D8F5FF;
			line-height: 28px;
			text-shadow: 0px 4px 10px rgba(60,151,255,0.8);
			margin-left: 20px;
			margin-right: 30px;
		}
	}
	.canvasWrap{
		display: flex;
		flex-direction: row;
		// flex: 1;
		width: 100%;
		height: 660px;
		// background: #C3E6FF;
		position: relative;
		padding: 20px;
		padding-top: 0;
		.goodsContainer{
			position: absolute;
			width: 800px;
			height: 660px;
			// z-index: 11;
		}
		.carContainer{
			position: absolute;
			width: 800px;
			height: 660px;
			// z-index: 11;
		}
		.transformGoods{
			position: absolute;
			width: 800px;
			height: 660px;
		}
		.agvTopGoodsContainer{
			position: absolute;
			left: 800px;
			top: 0;
		}
		.agvGoodsContainer{
			position: absolute;
			left: 900px;
			bottom: 20px;
		}
	}
	.botWrap{
		display: flex;
		flex-direction: row;
		height: 180px;
		width: 100%;
		.botLeft{
			width: 720px;
			display: flex;
			flex-direction: column;
			.topCondition{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 30px;
				.dateSelect{
					display: flex;
					flex-direction: row;
					align-items: center;
					background: rgba(255,255,255,0.1);
					border-radius: 6px;
					// margin-left: 30px;
					span{
						padding:0 14px;
						cursor: pointer;
						line-height: 30px;
						height: 30px;
						color: #fff;
						opacity: 0.5;
						font-size: 16px;
						position: relative;
						&::after{
							content: '';
							height: 24px;
							width: 1px;
							position: absolute;
							top: 50%;
							right: 0;
							background:	#D8D8D8;
							opacity: 0.3;
							transform: translate(0, -50%);
						}
						&:last-of-type{
							&::after{
								display: none;
							}
						}
					}
					.activeSelect{
						opacity: 1;
					}
				}
			}
		}
		.botRight{
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-left: 30px;
			.botRightHeader {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 20px;
				height: 44px;
				// justify-content: center;
				img{
					width: 22px;
					height: 22px;
				}
				.topText{
					font-size: 20px;
					color: #D8F5FF;
					line-height: 28px;
					text-shadow: 0px 4px 10px rgba(60,151,255,0.8);
					margin-left: 20px;
					margin-right: 30px;
				}
			}
		}
	}
}
.header-item{ //datav 表头 字体颜色
	color: rgba($color: #fff, $alpha: 0.6);
}
// .row-item :div{// -item div:first-child
// 	margin-right: 3px;
// }
.row-item{
	padding-right: 0 !important;
	color: rgba($color: #fff, $alpha: 0.9);
}
.datavTableStatus {
	background: #165DFF;
	border-radius: 2px;
	padding: 2px 4px;
	font-size: 13px;
}
.defaultTableStatus{
	background: #BBBCBE;
	border-radius: 2px;
	padding: 2px 4px;
	font-size: 13px;
}
</style>
